<template>
  <div class="equipment-container">
    <h2 class="section-title">专业设备租赁</h2>
    <el-table :data="equipmentList" style="width: 100%">
      <el-table-column prop="name" label="设备名称" width="180" />
      <el-table-column label="设备图片" width="120">
        <template #default="{ row }">
          <el-image
              :src="row.image"
              :preview-src-list="[row.image]"
              fit="cover"
              style="width: 80px; height: 60px;"
          />
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="规格参数" />
      <el-table-column prop="price" label="日租金" width="120">
        <template #default="{ row }">
          <span class="price">{{ row.price }}元/天</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default>
          <el-button type="primary" size="small">立即租赁</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const equipmentList = [
  {
    name: 'RED KOMODO 6K',
    image: 'https://via.placeholder.com/150',
    spec: '6K电影机/DSMC2卡口/全局快门',
    price: 2500
  },
  {
    name: 'ARRI Alexa Mini LF',
    image: 'https://via.placeholder.com/150',
    spec: '大画幅电影机/4.5K分辨率',
    price: 4800
  },
  {
    name: 'DJI Ronin 4D',
    image: 'https://via.placeholder.com/150',
    spec: '8K全画幅/四轴稳定系统',
    price: 3200
  },
  {
    name: 'ARRI SkyPanel S360-C',
    image: 'https://via.placeholder.com/150',
    spec: 'LED影视灯/360W/CCT调节',
    price: 800
  }
]
</script>

<style scoped>
.equipment-container {
  padding: 40px 0;
}

.price {
  color: var(--el-color-primary);
  font-weight: bold;
}
</style>